<template>
  <div>
    {{dataArray.spiderForm.title}}
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="任务名称">
        <el-col :span="11">
          <el-input v-model="form.name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="选择城市">
        <el-cascader :options="cityOptions" v-model="form.selectedCityOptions" @change="handleChange" filterable changeOnSelect></el-cascader>
      </el-form-item>
      <el-form-item label="选择房源类型">
        <el-cascader :options="styleOptions" v-model="form.selectedStyleOptions" @change="handleChange" filterable changeOnSelect></el-cascader>
      </el-form-item>
      <el-form-item label="采集页数">
          <el-col :span="4">
            <el-input v-model="form.startNum" placeholder="起始数"></el-input>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-input v-model="form.endNum" placeholder="结束数"></el-input>
          </el-col>
      </el-form-item>

      <el-form-item :label="'字段' + (index+1)" v-for="(xpath, index) in form.xpath" :key="xpath.key" style="margin-bottom: 10px">
        <el-col :span="6">
          <el-input v-if="index != 0" v-model="xpath.name" placeholder="字段名"></el-input>
        </el-col>
        <el-col :span="11">
          <el-input v-model="xpath.expression" placeholder="XPATH表达式"></el-input>
        </el-col>
        <el-col :span="11" :offset="1">
          <span v-if='index == 0' style="font-size: 15px; color: crimson">* 价格（prices）为必要字段</span>
        </el-col>
        <el-col :span="24" style="margin-top: 10px">
          <span v-if="index == 0" style="font-size: 15px; color: darkgrey">
            <span style="float: left">示例：</span>
            <el-popover
              ref="popover1"
              placement="top-start"
              title="出租房xpath示例"
              width="600"
              trigger="hover">
              <p>默认字段1(价格)：//div[@class="listBox"]/ul/li//div[@class="money"]/b/text()</p>
              <p>字段2(标题)：//div[@class="listBox"]/ul/li/div[@class="des"]/h2/a[@tongji_label="listclick"]/text()</p>
              <p>字段3(厅室和面积)：//div[@class="listBox"]/ul/li/div[@class="des"]/p[@class="room"]/text()</p>
              <p>字段4(区域)：//div[@class="listBox"]/ul/li/div[@class="des"]/p[@class="add"]/a[1]/text()</p>
              <p>字段5(地址)：//div[@class="listBox"]/ul/li/div[@class="des"]/p[@class="add"]/a[2]/text()</p>
              <div slot="reference" style="float: left"><el-button v-popover:popover1>出租房</el-button></div>
            </el-popover>
            <el-popover
              ref="popover2"
              placement="top-start"
              title="二手房xpath示例"
              width="700"
              trigger="hover">
              <p>默认字段1(价格)：//div[@class="content-side-left"]/ul/li/div[@class="price"]/p[@class="sum"]/b/text()</p>
              <p>字段2(标题)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/h2/a[@tongji_label="listclick"]/text()</p>
              <p>字段3(厅室)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][1]/span[1]/text()</p>
              <p>字段4(面积)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][1]/span[2]/text()</p>
              <p>字段5(楼层)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][1]/span[4]/text()</p>
              <p>字段6(单价)：//div[@class="content-side-left"]/ul/li/div[@class="price"]/p[@class="unit"]/text()</p>
              <p>字段7(区域)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][2]/span/a[2]/text()</p>
              <p>字段8(地址)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][2]/span/a[1]/text()</p>
              <div slot="reference" style="float: left"><el-button v-popover:popover2>二手房</el-button></div>
            </el-popover>
            <el-popover
              ref="popover3"
              placement="top-start"
              title="商业地产xpath示例"
              width="700"
              trigger="hover">
              <p>默认字段1(价格)：//div[@class="content-side-left"]/ul/li/div[@class="price"]/p[@class="sum"]/b/text()</p>
              <p>字段2(标题)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/h2/a[@tongji_label="listclick"]/span/text()</p>
              <p>字段3(厅室)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][1]/span[1]/text()</p>
              <p>字段4(面积)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][1]/span[2]/text()</p>
              <p>字段5(区域)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][2]/span[1]/text()</p>
              <p>字段6(地址)：//div[@class="content-side-left"]/ul/li/div[@class="list-info"]/p[@class="baseinfo"][2]/span[2]/text()</p>
              <div slot="reference" style="float: left"><el-button v-popover:popover3>商业地产</el-button></div>
            </el-popover>
          </span>
        </el-col>
        <el-button v-if='index != 0' @click.prevent="removeDomain(xpath)">删除</el-button>
      </el-form-item>
      <el-button style="margin-bottom: 20px" @click="addDomain">新增字段</el-button>
      <el-form-item label="描述">
        <el-col :span="18">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {createTasks} from '../apis/api'
  import {cityOptions} from '../apis/cities'
  import {styleOptions} from '../apis/houseStyleOptions'
  export default {
    data () {
      return {
        dataArray: this.$store.state,
        form: {
          name: '',
          selectedCityOptions: [],
          selectedStyleOptions: [],
          startNum: '',
          endNum: '',
          xpath: [{
            name: '价格',
            expression: ''
          }],
          desc: ''
        },
        // endpointDB: this.$store.state.endpointDB,
        cityOptions: cityOptions,
        styleOptions: styleOptions
      }
    },
    methods: {
      onSubmit () {
        let _this = this
        let xpaths = {}
        let xlsheadtitle = []
        _this.form.xpath.forEach(function (value) {
          xpaths[value.name] = value.expression
          xlsheadtitle.push(value.name)
        })
        xpaths = JSON.stringify(xpaths)
        xlsheadtitle = JSON.stringify(xlsheadtitle)
        let tasksData = {
          name: _this.form.name,
          type_spider: '普通爬虫',
          type_template: '指定寻址',
          type_business: '指定寻址',
          proxy: '无',
          website: JSON.stringify([_this.form.selectedCityOptions, _this.form.selectedStyleOptions]),
          xpath: xpaths,
          startNum: _this.form.startNum,
          endNum: _this.form.endNum,
          desc: _this.form.desc,
          myTd: xlsheadtitle
//          xlsheadtitle: xlsheadtitle
        }
        createTasks(tasksData).then(response => { // {emulateJSON: true} 这个可能导致提交的数据出现问题 多一层
          _this.$message({
            message: '创建成功！',
            type: 'success'
          })
//          _this.$store.dispatch('deleteTab', '1-6-1')
        }).catch(error => {
          console.log(error)
        })
      },
      addDomain () {
        let _this = this
        _this.form.xpath.push({
          name: '',
          expression: ''
        })
      },
      removeDomain (item) {
        let _this = this
        let index = _this.form.xpath.indexOf(item)
        if (index !== -1) {
          _this.form.xpath.splice(index, 1)
        }
      },
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>
